{block name=body}
<div class="row top-margin" >
	<div class="col-sm-9">
		{if $data}
		<div id="form-container">
			<div class="text-center">
				<h1>Order no. {$data.payment_transaction_no}</h1>
				{$data.payment_created|date_format:"%Y-%m-%d"}<br />
				<b>{$data.user_gname} {$data.user_surname}</b><br />
				<a href="/admin/members/existing/{$data.user_id}">{$data.user_email}</a><br />
			</div>
		<hr>
			<div id="payment-wrapper">
				<form class="form-horizontal top-margin" id="payment-form" role="form" accept-charset="UTF-8" action="" method="post">
		      <input type="hidden" value="ChangePaymentMethod" name="action" /> 
		      <input type="hidden" value="/admin/includes/processes/processes-payment-method.php" name="url" /> 
		      <input type="hidden" name="payment_id" id="payment_id" value="{$data.payment_id}"/>
		      <input type="hidden" name="formToken" id="formToken" value="{$token}"/>
							<div class="form-group">
					      <label class="col-sm-3 control-label">Total amount: </label>
					      <div class="col-sm-9">
					      	<div class="form-text-element">$<span class="payment-amount">{$data.payment_charged_amount}</span> <span class="ccsurchage"> + {$surcharge_percentage}% credit card surchage = </span> <span class="ccsurchage"><b id="cctotal">${$total}</b></span></div>
					      </div>
					    </div>

							<div id="cc-wrapper" >
							 	<div class="form-group">
                    <label class="col-sm-3 control-label" for="ccno">Credit card number*</label>
                    <div class="col-sm-6">
                      <input type="text" id="ccno" class="cc-req form-control" name="cc[number]" autocomplete="off" required/>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-sm-3 control-label" for="ccname">Name on card*</label>
                    <div class="col-sm-6">
                      <input type="text" id="ccname" value="{$data.user_gname} {$data.user_surname}" class="cc-req form-control" name="cc[name]" autocomplete="off" required />
                    </div>
                  </div>
                  <div class="form-group">
                   <label class="col-sm-3 control-label" for="ccmonth">Expiration date*</label>
	                <div class="col-sm-3">
                     <select id="ccmonth" name="cc[month]" class="cc-select-req form-control required">
                       <option value="">Month</option>
                       <option value="01">1 - Jan</option>
                       <option value="02">2 - Feb</option>
                       <option value="03">3 - Mar</option>
                       <option value="04">4 - Apr</option>
                       <option value="05">5 - May</option>
                       <option value="06">6 - Jun</option>
                       <option value="07">7 - Jul</option>
                       <option value="08">8 - Aug</option>
                       <option value="09">9 - Sep</option>
                       <option value="10">10 - Oct</option>
                       <option value="11">11 - Nov</option>
                       <option value="12">12 - Dec</option>
                     </select>
                   </div>
                  <div class="col-sm-3">
                    <select id="ccyear" name="cc[year]" class="cc-select-req form-control required" >
                      {assign var=thisyear value=$smarty.now|date_format:"%Y"} 
                      {assign var=numyears value=$thisyear+20}
                      <option value="">Year</option>
                      {for $year=$thisyear to $numyears}
                        <option value="{$year}">{$year}</option> 
                      {/for}
                    </select>
                  </div>
                  </div>
                  <div class="form-group">
                    <label class="col-sm-3 control-label" for="cccsv">CSV*</label>
                    <div class="col-sm-3">
                      <input type="text" id="cccsv" name="cc[csv]" class="cc-req form-control" autocomplete="off" required />
                    </div>
                  </div>
                 </div>
               <div class=" col-sm-offset-3 error-alert" style="display:none;">
				    	<div class="alert alert-danger fade in ">
								<button class="close" aria-hidden="true" type="button" onclick="$(this).closest('.error-alert').fadeOut('slow');">&times;</button>
								<strong></strong>
							</div>
				    </div>
					<div class="text-center">
						<button id="step6-btn" type="submit" onclick="if($(this).closest('form').valid()){ $('#step6-btn').hide();$('#processing-div').show(); }" class="btn btn-default side-padding">Submit</button>
						<div style="display:none;" id="processing-div" class="btn btn-default side-padding">Processing...</div>
					</div>
				</form>
			</div>
		</div>
		{else}
		<div class="text-center"><h2>The order number is invalid or not pending.</h2></div>
		{/if}
	</div> 
</div>
{/block}

{block name=tail}
<script type="text/javascript">


$(document).ready(function(){

 	$('#payment-form').validate({
		onkeyup: false
	}); 

	   
	$('.double').rules("add", {
     number: true
   });

	$('#ccno').rules("add", {
     creditcard : true,
   });
   
   $('#cccsv').rules("add", {
     digits: true,
     minlength: 3
   });

	
});


</script>

{/block}
